<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/template.xhtml">

    <ui:define name="title">二级项配置</ui:define>
    <ui:define name="content">
        <h:form id="optionForm">
            <div class="ui-fluid" style="padding-top: 30px;">
                <div class="ui-g">
                    <div class="ui-g-12">
                        <div class="card">
                            <!-- 列表 -->
                            <div class="cad">
                                <p:growl id="msgs" showDetail="true"/>

                                <p:dataTable id="itemOptionListDataTable"
                                             widgetVar="dataTable"
                                             style="width: 100%"
                                             var="option"
                                             value="#{templateItemOptionListBean.itemOptionList}"
                                             scrollable="true"
                                             scrollWidth="100%"
                                             editable="true">

                                    <f:facet name="header">
                                        一级项名：<h:outputText value="#{templateItemInfoBean.$.title}" />
                                        <p:button value="返回" icon="fa fa-reply-all" href="/views/templateConf/itemConf/itemlist.xhtml" style="float:right"/>
                                    </f:facet>

                                    <p:ajax event="rowEdit" listener="#{templateItemOptionListBean.onRowEdit}" update=":optionForm:msgs" />
                                    <p:ajax event="rowEditCancel" listener="#{templateItemOptionListBean.onRowCancel}" update="itemOptionListDataTable" />

                                    <p:column headerText="二级项ID">
                                           <h:outputText value="#{option.id}" />
                                    </p:column>

                                    <p:column headerText="二级项key">
                                        <p:cellEditor>
                                            <f:facet name="output"><h:outputText value="#{option.optionKey}" /></f:facet>
                                            <f:facet name="input"><p:inputText value="#{option.optionKey}" style="width:100%" label="二级项名"/></f:facet>
                                        </p:cellEditor>
                                    </p:column>

                                    <p:column headerText="二级项值">
                                        <p:cellEditor>
                                            <f:facet name="output"><h:outputText value="#{option.optionValue}" /></f:facet>
                                            <f:facet name="input"><p:inputText value="#{option.optionValue}" style="width:100%" label="二级项值"/></f:facet>
                                        </p:cellEditor>
                                    </p:column>

                                    <p:column headerText="额外附加值">
                                        <p:cellEditor>
                                            <f:facet name="output"><h:outputText value="#{option.extraValue}" /></f:facet>
                                            <f:facet name="input"><p:inputText value="#{option.extraValue}" style="width:100%" label="额外附加值"/></f:facet>
                                        </p:cellEditor>
                                    </p:column>

                                    <p:column headerText="创建时间">
                                        <h:outputText value="#{option.createTime}" />
                                    </p:column>

                                    <p:column style="width:32px">
                                        <p:rowEditor />
                                    </p:column>
                                </p:dataTable>
                            </div>
                            <!-- 列表 -->
                        </div>
                        <div class="ui-g-12">
                            <p:commandButton value="新增行" styleClass="ui-priority-primary" process="@this" update=":optionForm:msgs"
                                             action="#{templateItemOptionListBean.onAddNew(templateItemInfoBean.$.id)}" oncomplete="PF('dataTable').addRow();"/>
                        </div>
                    </div>
                </div>
            </div>
        </h:form>
    </ui:define>
</ui:composition>